<template>
	<div class="layout-padding">
		<el-card class="layout-padding-auto" shadow="hover">
			<el-steps :active="active" finish-status="success" simple>
				<el-step title="基础信息" @click="go(0)" />
				<el-step title="数据修改" @click="go(1)" />
			</el-steps>
		</el-card>

		<el-card class="layout-padding-auto mt5" shadow="hover">
			<!-- 生成基本信息设置 -->
			<generator ref="generatorRef" :tableName="tableName" :dsName="dsName" v-if="active === 0" />
			<!-- 字段编辑设置 -->
			<edit-table ref="editTableRef" :tableName="tableName" :dsName="dsName" v-if="active === 1" />

			<div style="text-align: center">
				<el-button style="margin-top: 12px" @click="go(1)" v-if="active === 0">下一步</el-button>
				<el-button style="margin-top: 12px" @click="go(0)" v-if="active === 1">上一步</el-button>
				<el-button style="margin-top: 12px" @click="preview" v-if="active === 1">保存并预览</el-button>
				<el-button style="margin-top: 12px" @click="generatorHandle" v-if="active === 1">保存并生成</el-button>
			</div>
		</el-card>

		<!-- 预览基本信息 -->
		<preview-dialog ref="previewDialogRef" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { useGeneratorCodeApi } from '/@/api/gen/table'
import { useMessage } from '/@/hooks/message'
import { downBlobFile } from '/@/utils/other'

const { t } = useI18n()
const Generator = defineAsyncComponent(() => import('../table/generator.vue'))
const EditTable = defineAsyncComponent(() => import('../table/edit.vue'))
const PreviewDialog = defineAsyncComponent(() => import('../table/preview.vue'))
const previewDialogRef = ref()
const generatorRef = ref()

const route = useRoute()
const active = ref(0)
const tableId = ref()
const tableName = ref()
const dsName = ref()
const editTableRef = ref()
const generatorType = ref()

const go = async (activeNum: number) => {
	if (active.value === activeNum) return
	active.value = activeNum

	if (activeNum === 0) {
		await editTableRef.value.submitHandle()
	} else if (activeNum === 1) {
		const dataform = await generatorRef.value.submitHandle()
		tableId.value = dataform.id
		generatorType.value = dataform.generatorType
	}
}

const preview = async () => {
	await editTableRef.value.submitHandle()
	previewDialogRef.value.openDialog(tableId.value)
}

// 生成
const generatorHandle = async () => {
	await editTableRef.value.submitHandle()
	// 生成代码，zip压缩包
	if (generatorType.value === '0') {
		downBlobFile(`/gen/generator/download?tableIds=${[tableId.value].join(',')}`, {}, `${tableName.value}.zip`)
	}

	// 写入到指定目录
	if (generatorType.value === '1') {
		useGeneratorCodeApi([tableId.value].join(',')).then(() => {
			useMessage().success(t('common.optSuccessText'))
		})
	}
}

onMounted(() => {
	tableName.value = route.query.tableName
	dsName.value = route.query.dsName
})
</script>

<style scoped>
.layout-padding {
	height: auto !important;
}
</style>
